<script setup lang="ts">
import CdlSearch from "@/components/search";
import CdlTable from "@/components/table";
import CdlForm from "@/components/form"
import {Mode, Query, State} from "@/interfaces/components/Page";
import {useRouter} from "vue-router";
import {reactive, h} from "vue";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {Insure} from "@/interfaces/views/vehicle/insure";
import {FormTree} from "@/interfaces/components/Form";
import {TableTree} from "@/interfaces/components/Table";
import {FormData} from "@/interfaces/components/Page";
import {createPopup} from "@/utils/createPopup";
import {useGetVehicleList} from "@/api/vehicle/insure";
import {Vehicle} from "@/interfaces/views/vehicle/vehicle";
import {appStore} from "@/store/modules/app";
import {ElMessage} from "element-plus/es";
import {useFormTemplate} from "@/hooks/formHooks";
import {Inspect} from "@/interfaces/views/vehicle/inspect";
import {usePlanInspectionInsert} from "@/api/vehicle/inspection";

const store = appStore()
const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/vehicle-inspection"
}
const state = reactive<State<Query<Inspect>, Inspect>>({
  queryForm: {
    status: "1"
  },
  dataList: []
})
const {query} = useTablePagingTemplate(request, state)


const searTree: FormTree<Inspect> = [
  [
    {label: "车牌号", component: "input"},
    {label: "保险有效期区间", component: "datePicker", type: "daterange", labelWidth: 120}
  ]
]
const tree: TableTree<Inspect> = {
  colRule: [
    {ti: "关联车辆", prop: "licensePlate"},
    {ti: "到期日期", prop: "expTime"},
    {ti: "距离到期"},
    {ti: "检查类型", prop: "type", dict: "inspect_Item_type"},
    {ti: "经办人", prop: "handledBy"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "修改", type: "success", method: openInspectUpdate},
    {name: "填写记录", type: "primary", method: jumpInspectInsert},
  ]
}
const popupTree: FormTree<Inspect> = [
    [
      {label: "车检类型", component: "radio", prop: "type", options: store.getFormatDict("inspect_Item_type"),
        optionProps: {label: "dictLabel", value: "dictValue"}, rule: [
          {required: true, message: '必须选择车检类型', trigger: 'change'},
        ]}
    ],
  [
    {label: "关联车辆", component: "select", prop: "vehicleId", serviceOptionKey: "vehicleList",
      optionProps: {label: "licensePlate", value: "id"}, placeholder: "请选择关联车辆", rule: [
        {required: true, message: '必须选择关联车辆', trigger: 'change'},
      ]},
    {label: "到期日期", component: "datePicker", prop: "expTime", rule: [
        {required: true, message: '必须选择到期日期', trigger: 'change'},
      ]}
  ],
  [
    {label: "经办人", component: "input", prop: "handledBy", rule: [
        {required: true, message: '必须填写到经办人', trigger: 'blur'},
      ]},
    {label: "检查日期", component: "datePicker", prop: "inspectTime", rule: [
        {required: true, message: '必须填写检查日期', trigger: 'blur'},
      ]},
  ],
    [
      {label: "到期提醒", component: "select", prop: "remind", options: store.getFormatDict("expiration_reminder"),
        optionProps: {label: "dictLabel", value: "dictValue"}},
    ],
  [
    {label: "备注", component: "input", prop: "remark", type: "textarea", max: 200, rows: 4
      , style: "flex: 1"}
  ]
]
const popupData: FormData<Inspect> = {
  id: undefined,
  type: 1,
  vehicleId: undefined,
  licensePlate: "",
  expTime: "",
  handledBy: "",
  inspectTime: "",
  remind: 0,
  status: 1,
  remark: ""
}
const {createPopupDataTemplate} = useFormTemplate(popupData)

/**
 * 跳转添加记录
 */
function jumpInspectInsert(data: Inspect){
  router.push({
    path: "/vehicleManage/inspect/createAndModifyInspect",
    query: {
      id: data.id,
      type: data.type,
      status: "true"
    }
  })
}
/**
 * 打开编辑
 * @param data
 */
function openInspectUpdate(data: Insure){
  createPopup("修改车检计划", h(CdlForm, {
    templateTree: popupTree,
    model: createPopupDataTemplate(data),
    init: {vehicleList: getVehicleList}
  }), "add", popupCallBack)
}
let vehicleList: Vehicle[] = []
/**
 * 获取车辆列表
 */
function getVehicleList(){
  return new Promise((resolve, reject) => {
    useGetVehicleList().then(res =>{
      vehicleList = res.data
      resolve(res.data)
    })
  })
}
/**
 * 新建计划
 */
function openPlanInspectInsert(){
  createPopup("新建车检计划", h(CdlForm, {
    templateTree: popupTree,
    model: popupData,
    init: {vehicleList: getVehicleList}
  }), "add", popupCallBack)
}
/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){
  for (let i = 0; i < vehicleList.length; i++) {
    if (vehicleList[i].id === data.vehicleId) {
      data.licensePlate = vehicleList[i].licensePlate
      break
    }
  }
  switch (mode){
    case "add":
      usePlanInspectionInsert(data).then(()=>{
        ElMessage.success("新建成功！")
        query({
          status: "1"
        })
      })
      break
  }
}
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree">
      <template #menu>
        <el-button type="primary" @click="openPlanInspectInsert" v-auth="'vehicle:inspect:save'">新建计划</el-button>
        <el-button type="warning" v-auth="'vehicle:inspect:export'">导出</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tree" :data="state.dataList" :control-width="260"></CdlTable>
  </el-card>
</template>
